<template>
   <Teleport to=".sdy-header">
      <van-nav-bar :title="title" :left-arrow="back">
         <template #left>
            <slot name="left">
               <van-icon class="back-btn" name ="arrow-left"  @click="$router.go(-1)"/>
            </slot>
         </template>
         <template #title>
            <slot name="title">{{ title }}</slot>
         </template>
         <template #right>
            <slot name="right"></slot>
         </template>
      </van-nav-bar>
   </Teleport>
</template>

<script setup lang="ts">

import { defineProps } from 'vue';
interface MyTopbar {
   title: string,
   back?: boolean
}

defineProps<MyTopbar>()

</script>

<style scoped lang="scss">
@import '@/styles/variable.scss';
// 覆盖样式
:deep(.van-nav-bar__content) {
  background-color: $globalColor;
}

.back-btn {
  font-size: 24px;
  color: black!important;
}
</style>